<div class="pl-3 pr-3 bg-white">
    <h4>供应商详情</h4>
    <ts-tabs [tabs]="['新增供应商','财务信息']" [color]="global.params.color" [target]="tsTabs" activeTab="新增供应商">
    </ts-tabs>
</div>
<div class="p-2">
    <div #tsTabs='tsTabs' tsTabs class="card">
        <div class="card-body">
            <div tsTab tab='新增供应商'>
                <div class="card-body">
                    <div class="container m-0">
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">供应商名称</label>
                            <div class="col-sm-10" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入供应商名称">
                                <div class="invalid-feedback">供应商名称是必填的</div>
                                <label class="col-sm-2 col-form-label label-required text-right">商品类别</label>
                                <select [(ngModel)]="goods.goodsParentType" class="custom-select" placeholder="请选择商品类别">
                                    <option *ngFor="let type of parentTypes" [ngValue]="type.value">{{type.text}}</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">公司地址</label>
                            <div class="col-sm-10" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入公司地址">
                                <label class="col-sm-2 col-form-label label-required text-right">发定代表人</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入发定代表人">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">业务联系人</label>
                            <div class="col-sm-10" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入业务联系人">
                                <label class="col-sm-2 col-form-label label-required text-right">业务联系电话</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入业务联系电话">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">微信</label>
                            <div class="col-sm-10" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入微信">
                                <label class="col-sm-2 col-form-label label-required text-right">QQ</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入QQ">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">物流联系人</label>
                            <div class="col-sm-10" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入物流联系人">
                                <label class="col-sm-2 col-form-label label-required text-right">物流联系电话</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入物流联系电话">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">区域</label>
                            <div class="col-sm-10" style="display: flex">
                                <select [(ngModel)]="goods.goodsParentType" class="custom-select" placeholder="请选择区域">
                                    <option *ngFor="let type of parentTypes" [ngValue]="type.value">{{type.text}}</option>
                                </select>
                                <label class="col-sm-2 col-form-label label-required text-right">所属采购员</label>
                                <select [(ngModel)]="goods.goodsParentType" class="custom-select" placeholder="请选择所属采购员">
                                    <option *ngFor="let type of parentTypes" [ngValue]="type.value">{{type.text}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">社会统一代码</label>
                            <div class="col-sm-10" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入社会统一代码">
                                <label class="col-sm-2 col-form-label label-required text-right">财务联系电话</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入财务联系电话">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">行业许可证号</label>
                            <div class="col-sm-10" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入行业许可证号">
                                <label class="col-sm-2 col-form-label label-required text-right">Email</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入Email">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">退货地址</label>
                            <div class="col-sm-10" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入退货地址">
                                <label class="col-sm-2 col-form-label label-required text-right">退货联系人</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入退货联系人">
                            </div>
                        </div>
                        <div style="text-align: center;height: 45px; font-weight: 900">登入</div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">登入账号</label>
                            <div class="col-sm-10" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入登入账号">
                                <label class="col-sm-2 col-form-label label-required text-right">初始密码</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入初始密码">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">登入限制</label>
                            <div class="col-sm-7" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" style="width: 61%;" type="text" class="form-control" placeholder="请输入登入限制">
                                <label class="col-sm-3 col-form-label label-required text-right">账号状态</label>
                                <ts-switch [color]="global.params.color" style="padding-top: 10px" [values]="{open:1,close:0}" [(ngModel)]="goods.isActive"></ts-switch>
                            </div>
                        </div>
                        <!-- <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">是否启用账号</label>
                            <div class="col-sm-10 pt-2">
                                <ts-switch [color]="global.params.color" [values]="{open:1,close:0}" [(ngModel)]="goods.isActive"></ts-switch>
                            </div>
                        </div> -->
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">选择模块</label>
                            <div class="col-sm-10 pt-2">
                                <ts-checkbox class="mr-5" *ngFor="let sel of selectModules;index as i" color="secondary" [value]="i+1" [(ngModel)]="sel.name">{{sel.name}}</ts-checkbox>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">查询收费</label>
                            <div class="col-sm-4" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入查询收费">
                            </div>
                            <span style="padding-top: 6px;">/模块</span>
                        </div>
                    </div>
                </div>

                <!-- <div class="card-body">
                    <div class="container m-0">
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">企业合同</label>
                            <div class="col-sm-10">
                                <ts-image-card #tsUp [(src)]="goods.goodsThumb" [config]="options" title="点击选择"></ts-image-card>
                            </div>
                        </div>
                    </div>
                </div> -->

                <div class="mt-2 m-btn">
                    <button routerLink="/supplier/supplier" tsBtn color="white">返回列表</button>
                    <button *ngIf="goods.id===0" tsBtn loading color="success" (submit)="confirmInsert($event)">确认添加</button>
                    <button tsBtn color="warning" (click)="resetForm()">添加新供应商</button>
                    <button *ngIf="goods.id>0" tsBtn loading color="primary" (submit)="confirmUpdate($event)">确认修改</button>
                </div>
            </div>
            <div tsTab tab='财务信息'>
                <div class="card-body">
                    <div class="container m-0">
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">开票名称</label>
                            <div class="col-sm-10" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入开票名称">
                                <div class="invalid-feedback">开票名称是必填的</div>
                                <label class="col-sm-2 col-form-label label-required text-right">发票类型</label>
                                <select [(ngModel)]="goods.goodsParentType" class="custom-select" placeholder="请选择发票类型">
                                    <option *ngFor="let type of parentTypes" [ngValue]="type.value">{{type.text}}</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">公司地址</label>
                            <div class="col-sm-10" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入公司地址">
                                <label class="col-sm-2 col-form-label label-required text-right">税号</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输税号">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">银行账号</label>
                            <div class="col-sm-10" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入银行账号">
                                <label class="col-sm-2 col-form-label label-required text-right">开户行名称</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入开户行名称">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">税票地址</label>
                            <div class="col-sm-10" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入税票地址">
                                <label class="col-sm-2 col-form-label label-required text-right">税票电话</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入税票电话">
                            </div>
                        </div>

                        <div style="text-align: center;height: 45px;font-weight: 900">资质附件</div>

                        <div class="card-body">
                            <div class="container m-0">
                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label label-required text-right">营业执照</label>
                                    <div class="col-sm-10">
                                        <ts-image-card #tsUp [(src)]="goods.goodsThumb" [config]="options" title="点击选择"></ts-image-card>
                                        <label class="col-sm-2 col-form-label label-required text-right">行业许可证</label>
                                        <ts-image-card #tsUp [(src)]="goods.goodsThumb" [config]="options" title="点击选择"></ts-image-card>
                                        <label class="col-sm-2 col-form-label label-required text-right">
                                            法人身份证反面照片
                                        </label>
                                        <ts-image-card #tsUp [(src)]="goods.goodsThumb" [config]="options" title="点击选择"></ts-image-card>
                                        <ts-image-card #tsUp [(src)]="goods.goodsThumb" [config]="options" title="点击选择"></ts-image-card>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">有效期</label>
                            <div class="col-sm-8" style="display: flex">
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入有效期">
                                <label class="col-sm-2 col-form-label label-required text-right">有效期</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入有效期">
                                <label class="col-sm-2 col-form-label label-required text-right">有效期</label>
                                <input [(ngModel)]="goods.goodsName" type="text" class="form-control" placeholder="请输入有效期">

                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">选择模块</label>
                            <div class="col-sm-10 pt-2">
                                <ts-checkbox class="mr-5" *ngFor="let sel of selectModules;index as i" color="secondary" [value]="i+1" [(ngModel)]="sel.name">{{sel.name}}</ts-checkbox>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="card-body">
                    <div class="container m-0">
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label label-required text-right">企业合同</label>
                            <div class="col-sm-10">
                                <ts-image-card #tsUp [(src)]="goods.goodsThumb" [config]="options" title="点击选择"></ts-image-card>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-2 m-btn">
                    <button routerLink="/supplier/supplier" tsBtn color="white">返回列表</button>
                    <button *ngIf="goods.id===0" tsBtn loading color="success" (submit)="confirmInsert($event)">确认添加</button>
                    <button tsBtn color="warning" (click)="resetForm()">添加</button>
                    <button *ngIf="goods.id>0" tsBtn loading color="primary" (submit)="confirmUpdate($event)">确认修改</button>
                </div>
            </div>
        </div>
    </div>
</div>